<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<link rel="stylesheet" href="${ctx}/plugins/jqPaginator/jqPaginator.css">
<link rel="stylesheet" href="${ctx}/plugins/jqPaginator/jqPaginator.js">
<html>
<head>
    <title>抗疫作品</title>

</head>
<body>
<!--head-->
<jsp:include page="../head.jsp"></jsp:include>
<div id="app">
    <ul class="nav nav-tabs nav-justified">
        <li role="presentation" class="active:shows==1" @click="fun1() "><a href="/cdata/map.do">疫情地图</a></li>
        <li role="presentation" class="active:shows==2" @click="fun2()"><a href="/knowledge/list.do">疾病知识</a></li>
        <li role="presentation" class="active:shows==3" @click="fun3()"><a href="/work/list.do">抗疫作品</a></li>
    </ul>
</div>
<div id="app20">
    <el-container>
        <!-- 文件上传 -->
        <%-- <form action="${ctx}/work/upload.do" enctype="multipart/form-data" method="post">
             <input type="file" name="file">
             作品简介：<input type="text" name="text">
             <input type="submit" value="提交">
         </form>--%>
        <el-main>
            <div>
                <h4 style="color: #0f0f0f;font-weight: bold"><i class="el-icon-star-on"></i>作品上传</h4>

                <form action="${ctx}/work/upload.do"
                      enctype="multipart/form-data" method="post" id="reportIMGform">
                    <input type="file" name="file" id="reportIMG" onchange="setImg()">
                    <input type="text" name="text" placeholder="作品简介">
                    <button type="button" onclick="submitIMG()" class="btn btn-default">上传</button>
                </form>
            </div>
            <h4 style="color: #0f0f0f;font-weight: bold"><i class="el-icon-star-on"></i>作品展示</h4>
            <div class="row">

                <c:forEach items="${pageInfo.list}" var="work" varStatus="st">
                    <div class="center-block">
                        <div class="col-md-4">
                            <img src="${ctx}/img/${work.filename}" class="img-responsive"
                                 alt="Responsive image"/>
                            <span class="demonstration">简介：${work.description}</span>
                        </div>

                    </div>
                </c:forEach>
            </div>

        </el-main>
        <el-footer>
            <div class="box-footer">
                <%--request.getParameter("pageUrl")--%>
                <%--${param.pageUrl}--%>
                <jsp:include page="../page.jsp">
                    <jsp:param value="${ctx}/work/list.do" name="pageUrl"/>
                </jsp:include>
            </div>
        </el-footer>
    </el-container>
</div>

<!--Vue-->
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            fun1: function () {
                this.shows = 1;
            },
            fun2: function () {
                this.shows = 2;
            },
            fun3: function () {
                this.shows = 3;
            },
        }
    })
    new Vue().$mount('#app20')
</script>
<script>
    function submitIMG() {
        var fileInput = $('#reportIMG').get(0).files[0];
        console.info(fileInput);
        if (fileInput) {
            var img = new Image();
            img.onload = function () {
                var width = img.width;  //图片的宽
                var height = img.height;   //图片的高
                console.log(width)
                console.log(height)
                if (width != 1024 || height != 768) {
                    alert('图片尺寸不符合规范，请选择尺寸为1024*768的图片！');
                } else if (fileInput.size / 1024 > 2048) {
                    alert('您上传的图片大小超过了2M，请更新符合规范的图片!');
                }else {
                    //后续代码
                    $("#reportIMGform").submit();
                }


            };
            img.onerror = function () {
                alert("error!");
            };
            img.src = window.URL.createObjectURL(fileInput);
            console.log(img.src);

        } else {
            alert("请选择要上传的图片！");
        }
    }
</script>
</body>
</html>
